<template>
  <div class="wrap">
    <div class="header mgt20">
      <span class="mgl20" style="font-size: 25px;">{{$t('remittance.Collection account')}}</span>
    </div>
    <div class="content">

      <el-col
        v-for="item in remittanceAccount"
        :key="item.id"
        v-loading="loading"
        class="mgb20 mgl20 mgt20"
        style="width: 480px; border-color: black"
        :span="7"
      >
        <el-card shadow="hover">
          <el-descriptions
            :column="1"
            size="medium"
            :colon="false"
          >
            <el-descriptions-item>
              <div style="margin-top: 10px"></div>
              <span class="title_info title_weight">{{$t('remittance.Receiving account information')}}:</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <span class="title_info title_weight">{{$t('remittance.Account name')}}：</span>
              <span class="title_info title_weight-300">{{item.account_name}}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <span class="title_info title_weight">{{$t('remittance.Bank of deposit')}}：</span>
              <span class="title_info title_weight-300">{{item.bank_of_deposit}}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <span class="title_info title_weight">{{$t('remittance.Bank account number')}}：</span>
              <span class="title_info title_weight-300">{{item.bank_account_number}}</span>
            </el-descriptions-item>
          </el-descriptions>
          <hr>
          <el-descriptions
            :column="1"
            size="medium"
            :colon="false"
          >
            <el-descriptions-item>
              <span class="title_info" v-if="item.account_status">{{$t('remittance.display')}}</span>
              <span class="title_info" style="color:#AAAAAA;" v-else>{{$t('remittance.Hiddenn')}}</span>
              <span class="title_info save_info title_weight" style="margin-left: 230px" @click="delAccountInfo(item.id)">{{$t('remittance.Remove')}}</span>
              <span class="title_info save_info title_weight" style="margin-left: 50px" @click="saveAccount(item)">{{$t('remittance.edit')}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col class="mgb20 mgl20 mgt20" style="width: 480px" :span="7">
        <el-card shadow="hover">
          <el-descriptions
            :column="1"
            size="medium"
            :colon="false"
          >
            <el-descriptions-item>
              <div class="title_info add_info title_weight" @click="addAccount">+ {{$t('remittance.Add a collection account')}}</div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

    </div>

    <el-dialog
      :title="accountInfoTitle"
      :visible.sync="accountInfoDialog"
      width="600px"
    >
      <el-form
        ref="userForm"
        :model="dialogForm"
        label-width="120px"
      >
        <el-form-item :label="$t('remittance.Account name') + '：'" prop="accountName" class="my-form">
          <el-input v-model.trim="dialogForm.accountName" :placeholder="$t('remittance.formText1')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('remittance.Bank of deposit') + '：'" prop="bankOfDeposit" class="my-form">
          <el-input v-model.trim="dialogForm.bankOfDeposit" :placeholder="$t('remittance.formText2')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('remittance.Bank account number') + '：'" prop="bankAccountNumber" class="my-form">
          <el-input v-model.trim="dialogForm.bankAccountNumber" :placeholder="$t('remittance.formText3')"></el-input>
        </el-form-item>
        <hr style="border: 1px solid rgba(200, 200, 200, 0.3);">
        <br>
        <el-form-item :label="$t('remittance.Customize the account name') + '：'" prop="customName">
          <el-input v-model="dialogForm.customName" :placeholder="$t('remittance.formText4')"></el-input>
          <div class="form-tips" style="font-size: 12px">
            {{$t('remittance.formText5')}}
          </div>
        </el-form-item>
        <el-form-item :label="$t('remittance.Account status') + '：'" prop="accountStatus">
          <el-radio v-model="dialogForm.accountStatus" :label="1">{{$t('remittance.reveal')}}</el-radio>
          <el-radio v-model="dialogForm.accountStatus" :label="0">{{$t('remittance.Hidden')}}</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="delAccountInfo(dialogForm.accountId)" :loading="delAccountInfoLoading" v-show="delAccountInfoShow">{{$t('remittance.Remove')}}</el-button>
        <el-button type="danger" @click="createAccountInfo" :loading="createAccountInfoLoading" :disabled="compareObj(dialogForm,copyRowForm)">{{$t('remittance.Confirmation information')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {compareObj, deepCopy} from "@/utils";
import {
  addRemittanceAccount,
  delRemittanceAccount,
  getRemittanceAccountList,
  saveRemittanceAccount
} from "@/api/remittance";
export default {
  name: "waitForConfirmationRemittance",
  data(){
    return {
      loading: true,
      accountInfoDialog: false,
      delAccountInfoLoading: false,
      createAccountInfoLoading: false,
      remittanceAccount:[],
      defaultDialogForm: {
        accountId: 0,
        accountName: '',
        bankOfDeposit: '',
        bankAccountNumber: '',
        customName: '',
        accountStatus: 1,
      },
      dialogForm: {},
      copyRowForm: {},
      delAccountInfoShow: false,
      accountInfoTitle: this.$t('remittance.Add a collection account'),
      saveType: 'add',
    }
  },
  created() {
    this.dialogForm = deepCopy(this.defaultDialogForm)
    this.getData()
  },
  methods:{
    compareObj,
    getData(){
      this.loading = true
      getRemittanceAccountList()
        .then(res=>{
          this.loading = false
          this.remittanceAccount = deepCopy(res.data)
        })
    },
    // 添加汇款账户
    addAccount(){
      this.dialogForm = deepCopy(this.defaultDialogForm)
      this.copyRowForm = deepCopy(this.dialogForm)
      this.delAccountInfoShow = false
      this.accountInfoTitle = this.$t('remittance.Add a collection account')
      this.saveType = 'add'
      this.accountInfoDialog = true
    },
    // 修改汇款账户
    saveAccount(row){
      let rowForm = {
        accountId: row.id,
        accountName: row.account_name,
        bankOfDeposit: row.bank_of_deposit,
        bankAccountNumber: row.bank_account_number,
        customName: row.custom_name,
        accountStatus: row.account_status,
      }
      this.dialogForm = deepCopy(rowForm)
      this.copyRowForm = deepCopy(this.dialogForm)
      this.delAccountInfoShow = true
      this.accountInfoTitle = this.$t('remittance.Modify payment account')
      this.saveType = 'save'
      this.accountInfoDialog = true
    },
    createAccountInfo(){
      if (this.saveType === 'add') {
        this.addAccountInfo()
      } else if (this.saveType === 'save') {
        this.saveAccountInfo()
      }
    },
    //添加汇款账户操作
    addAccountInfo(){
      this.createAccountInfoLoading = true

      this.$confirm('<span style="color: red">'+ this.$t('remittance.confirmText3') +'</span>', this.$t('remittance.confirmText1'), {
        dangerouslyUseHTMLString: true,
        confirmButtonText: this.$t('remittance.confirm'),
        cancelButtonClass: this.$t('remittance.cancel'),
      })
        .then(res=>{
          addRemittanceAccount(this.dialogForm)
            .then(res=>{
              if (res.error === 0) {
                this.getData()
                this.accountInfoDialog = false
                this.createAccountInfoLoading = false
                this.$successMessage(res.message)
              }
            })
        })
        .catch(res=>{
          this.createAccountInfoLoading = false
          // 点击了取消
        });
    },
    //修改汇款账户操作
    saveAccountInfo(){
      this.createAccountInfoLoading = true

      this.$confirm('<span style="color: red">'+ this.$t('remittance.confirmText3') +'</span>', this.$t('remittance.confirmText1'), {
        dangerouslyUseHTMLString: true,
        confirmButtonText: this.$t('remittance.confirm'),
        cancelButtonClass: this.$t('remittance.cancel'),
      })
        .then(res=>{
          this.createAccountInfoLoading = false
          this.accountInfoDialog = false
          saveRemittanceAccount(this.dialogForm)
            .then(res=>{
              if (res.error === 0) {
                this.getData()
                this.$successMessage(res.message)
              }
            })
        })
        .catch(res=>{
          this.createAccountInfoLoading = false
          // 点击了取消
        });
    },
    //移除汇款账户操作
    delAccountInfo(accountId){
      this.delAccountInfoLoading = true
      this.$confirm('', this.$t('remittance.confirmText2'), {
        dangerouslyUseHTMLString: true,
        confirmButtonText: this.$t('remittance.confirm'),
        cancelButtonClass: this.$t('remittance.cancel'),
      })
        .then(res=>{
          this.delAccountInfoLoading = false
          this.accountInfoDialog = false
          delRemittanceAccount({'accountId': accountId})
            .then(res=>{
              if(res.error === 0){
                this.getData()
                this.$successMessage(res.message)
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(res=>{
          this.delAccountInfoLoading = false
          // 点击了取消
        });
    },
  },
}
</script>

<style lang="less">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
.my-form .el-form-item__label{
  font-weight: 900 !important;
  color: black !important;
}
.title_info{
  font-size: 15px;
  color: black;
}
.title_weight{
  font-weight: 900;
}
.title_weight-300{
  font-weight: 300;
}
.save_info{
  color: #409EFF;
  cursor: pointer;
}
.add_info{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 440px;
  height: 186.5px;
  color: #409EFF;
  cursor: pointer;
}
</style>
